<template>
    <div class="mainPage">
        <a-spin tip="Loading..." :spinning="showSpinner">
            <div class="categoryContainer">
                <a-tag v-for="(item, index) in cookbookData.cookbookCategoryList" :key="index" :color="item.color"
                    style="margin-top: 5px;margin-bottom: 5px;">
                    {{ item.name }}
                </a-tag>
            </div>
            <div class="baseInfoIngredient">
                <div class="detailInfo" v-for="(item, index) in cookbookData.ingredientVOList" :key="index">
                    <span>{{ item.name }}</span>
                    <span>{{ item.ingredientUsage }}</span>
                </div>
            </div>

            <div class="baseInfo">
                <div class="detailInfo">
                    <span>{{ $t("cookbook.Craft") }}</span>
                    <span>{{ cookbookData.craft }}</span>
                </div>
                <div class="detailInfo">
                    <span>{{ $t('cookbook.Taste') }}</span>
                    <span>{{ cookbookData.taste }}</span>
                </div>
                <div class="detailInfo">
                    <span>{{$t('cookbook.difficulity')}}</span>
                    <span>{{ cookbookData.difficulty }}</span>
                </div>
                <div class="detailInfo">
                    <span>{{$t('cookbook.timeConsuming')}}</span>
                    <span>{{ cookbookData.timeConsuming }}</span>
                </div>
            </div>

            <a-list class="listClass" bordered :data-source="cookbookData.cookbookProcessList"
                style="background-color: #fff;" :loading="ingredientLoading">
                <template #renderItem="{ item }">
                    <a-list-item>
                        <a-list-item-meta :description="item.description">
                            <template #title>
                                <a href="#">{{ $t('cookbook.step') }} {{ item.index }}</a>
                            </template>
                        </a-list-item-meta>
                    </a-list-item>
                </template>

                <template #header>
                    <div style="font-size: 20px;">{{ $t('cookbook.ProductionSteps') }} - {{ cookbookData.name }}</div>
                </template>
            </a-list>
        </a-spin>
    </div>
</template>
<script setup>
import { findCookbookDetail } from '@/api/cookbook';
import { randomRGBColor } from '@/utils/color';
import { message } from 'ant-design-vue';
import { onActivated, onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const ingredientLoading = ref(false);
const cookbookId = ref(route.query.id);
const showSpinner = ref(false);

const cookbookData = reactive({
    id: null, // 菜谱ID
    name: null, // 菜谱名称
    craft: null, // 工艺
    taste: null, // 口味
    difficulty: null, // 难度
    timeConsuming: '', // 耗时
    remark: '', // 备注
    cookbookProcessList: [], // 流程列表
    ingredientVOList: [], // 食材列表
    cookbookCategoryList: [],//菜谱分类列表
});

const initData = () => {
    ingredientLoading.value = true;
    showSpinner.value = true;
    // 查询菜谱详情
    findCookbookDetail(cookbookId.value).then(res => {
        console.log(res);
        if (res.code === 200) {
            let data = res.data;
            cookbookData.id = data.id;
            cookbookData.name = data.name;
            cookbookData.craft = data.craft;
            cookbookData.taste = data.taste;
            cookbookData.difficulty = data.difficulty;
            cookbookData.timeConsuming = data.timeConsuming;
            cookbookData.remark = data.remark;
            if (data.cookbookProcessList.length > 0) {
                cookbookData.cookbookProcessList = data.cookbookProcessList;
            } else {
                cookbookData.cookbookProcessList = [{
                    cookbookId: data.id,
                    processOrder: 1,
                    img: null,
                    description: null,
                }];
            }
            for (let i = 0; i < cookbookData.cookbookProcessList.length; i++) {
                cookbookData.cookbookProcessList[i].index = i + 1;
            }
            if (data.ingredientVOList.length > 0) {
                cookbookData.ingredientVOList = data.ingredientVOList;
            } else {
                cookbookData.ingredientVOList = [{ name: null, ingredientUsage: null }];
            }
            (data.cookbookCategoryList ?? []).forEach(item => item.color = randomRGBColor());
            cookbookData.cookbookCategoryList = data.cookbookCategoryList;
        }
        ingredientLoading.value = false;
        showSpinner.value = false;
    }).catch(error => {
        message.error(error.message);
        showSpinner.value = false;
    });
}

onActivated(() => {
    initData();
})

onMounted(() => {
    initData();
})


</script>

<style lang="scss" scoped>
.mainPage {
    background-color: #fff;
    padding: 20px;

    .listClass {
        margin: 20px;
    }

    .categoryContainer {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #d9d9d9;
        border-radius: 10px;
        justify-content: center;
        align-items: center;
        margin: 20px;
        margin-bottom: 40px;
        padding: 20px;

        position: relative; // 为伪元素定位做准备

        // 添加伪元素来显示边框上的文字
        &::before {
            content: '分类'; // 这里可以修改为你想要显示的文字
            position: absolute;
            top: -10px; // 调整文字垂直位置
            left: 20px; // 调整文字水平位置
            background-color: white; // 文字背景颜色与容器背景相同
            padding: 0 5px; // 文字内边距
            font-size: 15px;
        }
    }
}

.ant-list:hover {
    border-color: #d9d9d9 !important;
}

.baseInfoIngredient {
    border: 1px solid #d9d9d9;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    justify-items: center;
    flex-wrap: wrap;
    margin: 20px;
    margin-bottom: 40px;
    // max-width: 1024px;

    position: relative; // 为伪元素定位做准备

    // 添加伪元素来显示边框上的文字
    &::before {
        content: '食材'; // 这里可以修改为你想要显示的文字
        position: absolute;
        top: -10px; // 调整文字垂直位置
        left: 20px; // 调整文字水平位置
        background-color: white; // 文字背景颜色与容器背景相同
        padding: 0 5px; // 文字内边距
        font-size: 15px;
    }

    .detailInfo {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
        padding: 20px;
    }

    .detailInfo span:nth-child(1) {
        font-size: 20px;
    }

    .detailInfo span:nth-child(2) {
        color: rgb(172, 171, 171);
    }
}

.baseInfo {
    border: 1px solid #d9d9d9;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    justify-items: center;
    margin: 20px;
    margin-bottom: 40px;

    position: relative; // 为伪元素定位做准备

    // 添加伪元素来显示边框上的文字
    &::before {
        content: '概述'; // 这里可以修改为你想要显示的文字
        position: absolute;
        top: -10px; // 调整文字垂直位置
        left: 20px; // 调整文字水平位置
        background-color: white; // 文字背景颜色与容器背景相同
        padding: 0 5px; // 文字内边距
        font-size: 15px;
    }

    .detailInfo {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
        padding: 20px;
    }

    .detailInfo span:nth-child(1) {
        font-size: 20px;
    }

    .detailInfo span:nth-child(2) {
        color: rgb(172, 171, 171);
    }
}

a:hover {
    color: #4ab44a !important;
}
</style>
